<template>
  <div class="article-manager">
    <div class="i-layout-page-header header_top">
      <div class="i-layout-page-header fl_header">
        <router-link :to="{ path: '/admin/cms/policy-file/index' }"
        >
          <Button icon="ios-arrow-back" size="small" type="text">返回</Button>
        </router-link
        >
        <Divider type="vertical" />
        <span
          class="ivu-page-header-title mr20"
          style="padding: 0"
          v-text="$route.params.id ? '编辑文件' : '添加文件'"
        ></span>
      </div>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        class="form"
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <div class="goodsTitle acea-row">
          <div class="title">基础信息</div>
        </div>
        <Row :gutter="24" type="flex">
          <Col v-bind="grid" class="mr50">
            <FormItem label="文件标题：" prop="title" label-for="title">
              <Input v-model="formValidate.title" placeholder="请输入" element-id="title" style="width: 90%" />
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="文件类型：" label-for="wjtype" prop="wjtype">
              <div class="perW90">
                <Select v-model="formValidate.wjtype">
                  <Option v-for="item in treeData" :value="item.id" :key="item.id">{{ item.title }}</Option>
                </Select>
              </div>
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="发表时间：" label-for="fbtime" prop="fbtime">
              <DatePicker
                class="form-sty"
                type="datetime"
                :value="formValidate.fbtime"
                placeholder="请选择发表时间"
                style="width: 200px;"
                format="yyyy-MM-dd HH:mm:ss"
                @on-change="formValidate.fbtime = $event"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="排序：" label-for="sort" prop="sort">
              <Input class="noinput" type="number" v-model="formValidate.sort" placeholder="请输入排序" />
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="立即发布：">
              <RadioGroup v-model="formValidate.isstate" class="form-sty">
                <Radio :label="1">启用</Radio>
                <Radio :label="0">关闭</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="政策大图：">
              <RadioGroup v-model="formValidate.state" class="form-sty">
                <Radio :label="1">是</Radio>
                <Radio :label="2">否</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="政策大图封面：" prop="imgtext">
              <div class="picBox" @click="modalPicTap('单选','policyCover')">
                <div class="pictrue" v-if="formValidate.imgtext">
                  <img :src="formValidate.imgtext" />
                </div>
                <div class="upLoad acea-row row-center-wrapper" v-else>
                  <Icon type="ios-camera-outline" size="24" />
                </div>
              </div>
              <!--              <div class="tip">建议尺寸：500 x 312 px</div>-->
            </FormItem>
          </Col>
        </Row>
        <div class="goodsTitle acea-row">
          <div class="title">文件</div>
        </div>
        <Row v-if="formValidate.wjtype == '2'">
          <Col class="mr50">
            <FormItem label="政策文件上传：" prop="wdurl">
              <Input v-model="formValidate.wdurl" placeholder="文件地址" element-id="title" style="width: 90%" />
              <Button type="primary" size="small" @click="modalPicTap('单选','policyFile')">上传文件</Button>
            </FormItem>
          </Col>
        </Row>
        <FormItem v-if="formValidate.wjtype == '1'" label="文件内容：" prop="texts">
          <WangEditor style="width: 90%" :content="formValidate.texts" @editorContent="getEditorContent"></WangEditor>
        </FormItem>
        <Button type="primary" class="submission" @click="onsubmit('formValidate')">提交</Button>
        <Button type="primary" class="submission" @click="$router.go(-1)">返回</Button>
      </Form>
      <!--   上传图片   -->
      <Modal
        v-model="modalPic"
        width="50px"
        scrollable
        footer-hide
        closable
        title="上传政策大图"
        :mask-closable="false"
        :z-index="888"
      >
        <uploadPictures
          :isChoice="isChoice"
          :fileFormat="imgFormat"
          v-if="modalPic"
          @uploadSuccessCallback="getUploadSuccessCallback"
        ></uploadPictures>
      </Modal>
      <!--      上传文件-->
      <Modal
        v-model="modalPolicy"
        width="50px"
        scrollable
        footer-hide
        closable
        title="上传政策文件"
        :mask-closable="false"
        :z-index="888"
      >
        <uploadPictures
          :isChoice="isChoice"
          :fileFormat="fileFormat"
          v-if="modalPolicy"
          @uploadSuccessCallback="getUploadSuccessCallback"
        ></uploadPictures>
      </Modal>
    </Card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import uploadPictures from "@/components/uploadPictures";
import WangEditor from "@/components/wangEditor/index.vue";
import { cmsAddApi, createApi, categoryTreeListApi } from "@/api/cms";
import dateRadio from "_c/dateRadio/index.vue";

export default {
  name: "addPolicyFile",
  components: { dateRadio, uploadPictures, WangEditor },
  data() {
    const validateUpload = (rule, value, callback) => {
      if (this.formValidate.wdurl) {
        callback();
      } else {
        callback(new Error("请上传文件"));
      }
    };
    //文件类型
    const validateUpload2 = (rule, value, callback) => {
      if (!this.formValidate.wjtype) {
        callback(new Error("请选择文件类型"));
      } else {
        callback();
      }
    };
    return {
      dialog: {},
      isChoice: "单选",
      fileFormat: ["pdf"],
      imgFormat: ["jpg", "jpeg", "png"],
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8
      },
      loading: false,
      formValidate: {
        id: 0,
        title: "",
        wdurl: "",
        texts: "",
        wjtype: 1,
        sort: 0,
        fbtime: "",
        isstate: 0,
        createTime: "",
        createUser: "",
        imgtext: "",
        laiyuan: "",
        state: 1,
        type: "",
        updateTime: "",
        updateUser: "",
        wdstate: 0
      },
      content: "",
      ruleValidate: {
        title: [{ required: true, message: "请输入文件标题", trigger: "blur" }],
        wjtype: [
          {
            required: false,
            validator: validateUpload2,
            trigger: "change",
            type: "number"
          }
        ],
        fbtime: [{ required: true, message: "请选择发表时间", trigger: "change" }],
        wdurl: [{ required: false, validator: validateUpload, trigger: "change" }],
        texts: [{ required: false, message: "请输入文件简介内容", trigger: "change" }]
      },
      value: "",
      modalPic: false,
      modalPolicy: false,
      template: false,
      treeData: [
        { html: "|-----", id: "1", pid: 0, title: "富文本" },
        { html: "|-----", id: "2", pid: 0, title: "附件文档" }
      ],
      formValidate2: {
        type: 1
      },
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: "100%", // 初始容器宽度
        UEDITOR_HOME_URL: "/admin/UEditor/",
        serverUrl: ""
      },
      options: this.$timeOptions
    };
  },
  computed: {
    ...mapState("media", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 120;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    }
  },
  watch: {
    $route(to, from) {
      if (this.$route.params.id) {
        this.getDetails();
      } else {
        this.formValidate = {
          id: 0,
          title: "",
          wdurl: "",
          texts: "",
          wjtype: 1,
          isRacking: 0,
          sort: 0,
          fbtime: "",
          isstate: 0
        };
      }
    }
  },
  methods: {
    //文件内容
    getEditorContent(data) {
      this.content = data;
      this.formValidate.texts = data;
    },
    // 选择文件
    modalPicTap(model, type) {
      switch (type) {
        case "policyCover":
          this.modalPic = true;
          break;
        case "policyFile":
          this.modalPolicy = true;
          break;
      }
    },
    // 选中文件
    getPic(pc) {
      if ((pc.att_dir).includes(this.fileFormat)) {
        this.formValidate.wdurl = pc.att_dir;
        this.modalPic = false;
      } else {
        this.$Message.error("请选择" + this.fileFormat + "格式文件");
      }
    },
    //获取上传成功结果
    getUploadSuccessCallback(url) {
      if (this.modalPic) {
        this.modalPic = false;
        this.formValidate.imgtext = url;
      } else if (this.modalPolicy) {
        this.modalPolicy = false;
        this.formValidate.wdurl = url;
      } else {
        this.modalPic = false;
        this.modalPolicy = false;
        this.formValidate.wdurl = this.formValidate.imgtext = '';
      }
    },
    // 文件分类
    getClass() {
      this.treeData = [
        { html: "|-----", id: 1, pid: 0, title: "富文本" },
        { html: "|-----", id: 2, pid: 0, title: "附件文档" }
      ];
      // this.$Message.error(res.msg);
    },
    // 提交|发布数据
    onsubmit(name) {
      this.$refs[name].validate((valid) => {
        if (this.formValidate.id === 0) {
          this.formValidate = {
            title: this.formValidate.title,
            wdurl: (this.formValidate.wjtype == 2) ? this.formValidate.wdurl : "",
            texts: (this.formValidate.wjtype == 1) ? this.formValidate.texts : "",
            wjtype: this.formValidate.wjtype,
            isstate: this.formValidate.isstate,
            sort: this.formValidate.sort,
            state: this.formValidate.state,
            fbtime: this.formValidate.fbtime,
            imgtext: this.fileFormat.imgtext
          };
        }
        if (valid) {
          cmsAddApi(this.formValidate, this.$route.params.id ? "PUT" : "POST")
            .then(async (res) => {
              this.$Message.success("操作成功");
              setTimeout(() => {
                this.$router.push({ path: "/admin/cms/policy-file/index" });
              }, 500);
            })
            .catch((res) => {
              this.$Message.error("操作失败");
            });
        } else {
          return false;
        }
      });
    },
    // 文章详情
    getDetails() {
      createApi(this.$route.params.id ? this.$route.params.id : 0)
        .then(async (res) => {
          this.formValidate = res.data;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error("文件不存在");
        });
    }
  },
  mounted() {
    if (this.$route.params.id) {
      this.getDetails();
    }
  },
  created() {
    // this.getClass();
  }
};
</script>
<style scoped>
/deep/ .ivu-form-item-content {
    line-height: unset !important;
}

.picBox {
    display: inline-block;
    cursor: pointer;
}

.form .goodsTitle {
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    margin-bottom: 25px;
}

.form .goodsTitle ~ .goodsTitle {
    margin-top: 20px;
}

.form .goodsTitle .title {
    border-bottom: 2px solid #1890ff;
    padding: 0 8px 12px 5px;
    color: #000;
    font-size: 14px;
}

.form .goodsTitle .icons {
    font-size: 15px;
    margin-right: 8px;
    color: #999;
}

.form .add {
    font-size: 12px;
    color: #1890ff;
    padding: 0 12px;
    cursor: pointer;
}

.form .radio {
    margin-right: 20px;
}

.form .submission {
    width: 10%;
    margin-left: 27px;
}

.form .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
}

.form .iconfont {
    color: #898989;
}

.form .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
}

.form .pictrue img {
    width: 100%;
    height: 100%;
}

.Modals .address {
    width: 90%;
}

.Modals .address .iconfont {
    font-size: 20px;
}

.tip {
    margin-top: 10px;
    color: #bbb;
}
</style>
